<template>
  <div class="har-uploader">
    <div class="upload-area" 
         :class="{ 'drag-over': isDragOver, 'uploading': isUploading }"
         @dragover.prevent="handleDragOver"
         @dragleave.prevent="handleDragLeave"
         @drop.prevent="handleDrop"
         @click="triggerFileInput">
      <input 
        ref="fileInput"
        type="file"
        accept=".har"
        multiple
        @change="handleFileSelect"
        style="display: none"
      />
      
      <div v-if="!isUploading" class="upload-content">
        <div class="upload-icon">📁</div>
        <h3>上传 HAR 文件</h3>
        <p>拖拽文件到此处或点击选择文件</p>
        <p class="file-info">支持 .har 格式，可同时上传多个文件</p>
      </div>
      
      <div v-else class="uploading-content">
        <div class="loading-spinner"></div>
        <p>正在处理文件...</p>
      </div>
    </div>
    
    <div v-if="uploadedFiles.length > 0" class="uploaded-files">
      <div class="files-header">
        <h4>已上传的文件</h4>
        <div class="batch-actions" v-if="uploadedFiles.length > 1">
          <button 
            @click="toggleSelectAll" 
            class="select-all-btn"
            :class="{ active: isAllSelected }"
          >
            {{ isAllSelected ? '取消全选' : '全选' }}
          </button>
          <button 
            @click="confirmBatchDelete" 
            class="batch-delete-btn"
            :disabled="selectedFiles.length === 0"
          >
            批量删除 ({{ selectedFiles.length }})
          </button>
        </div>
      </div>
      <div class="file-list">
        <div 
          v-for="file in uploadedFiles" 
          :key="file.id"
          class="file-item"
          :class="{ 
            'selected': selectedFileId === file.id,
            'batch-selected': selectedFiles.includes(file.id)
          }"
          @click="selectFile(file.id)"
        >
          <div class="file-info">
            <div class="file-name">{{ file.name }}</div>
            <div class="file-details">
              <span class="file-size">{{ formatFileSize(file.size) }}</span>
              <span class="file-time">{{ formatTime(file.uploadTime) }}</span>
            </div>
          </div>
          <div class="file-actions">
            <button 
              @click.stop="toggleBatchSelect(file.id)" 
              class="batch-select-btn"
              :class="{ active: selectedFiles.includes(file.id) }"
              :title="selectedFiles.includes(file.id) ? '取消选择' : '选择删除'"
            >
              <span class="check-icon">{{ selectedFiles.includes(file.id) ? '✓' : '○' }}</span>
            </button>
            <button @click.stop="confirmDelete(file.id)" class="remove-btn" :title="`删除 ${file.name}`">
              <span class="delete-icon">🗑️</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
    
    <!-- 删除确认对话框 -->
    <div v-if="showDeleteConfirm" class="delete-confirm-overlay" @click="cancelDelete">
      <div class="delete-confirm-dialog" @click.stop>
        <div class="confirm-header">
          <div class="confirm-icon">⚠️</div>
          <h3>确认删除</h3>
        </div>
        <div class="confirm-content">
          <p v-if="!isBatchDelete">
            确定要删除文件 <strong>{{ getFileName(fileToDelete) }}</strong> 吗？
          </p>
          <div v-else>
            <p>确定要删除以下 <strong>{{ selectedFiles.length }}</strong> 个文件吗？</p>
            <div class="files-to-delete">
              <div 
                v-for="fileId in selectedFiles" 
                :key="fileId"
                class="file-to-delete-item"
              >
                📄 {{ getFileName(fileId) }}
              </div>
            </div>
          </div>
          <p class="confirm-warning">此操作不可撤销，文件将被永久删除。</p>
        </div>
        <div class="confirm-actions">
          <button @click="cancelDelete" class="cancel-btn">取消</button>
          <button @click="removeFile" class="confirm-delete-btn">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { HarFile } from '../types/har';
import { parseHar, validateHarFile, getHarFileInfo } from '../utils/dealHar';

// Props
interface Props {
  modelValue?: HarFile[];
  selectedFile?: HarFile | null;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => [],
  selectedFile: null
});

// Emits
const emit = defineEmits<{
  'update:modelValue': [files: HarFile[]];
  'file-selected': [file: HarFile];
  'file-removed': [fileId: string];
}>();

// Reactive data
const fileInput = ref<HTMLInputElement>();
const isDragOver = ref(false);
const isUploading = ref(false);
const error = ref('');
const showDeleteConfirm = ref(false);
const fileToDelete = ref<string>('');
const selectedFiles = ref<string[]>([]);
const isBatchDelete = ref(false);

// Computed
const uploadedFiles = computed(() => props.modelValue);
const selectedFileId = computed(() => props.selectedFile?.id || '');
const isAllSelected = computed(() => {
  return uploadedFiles.value.length > 0 && selectedFiles.value.length === uploadedFiles.value.length;
});

// Methods
function triggerFileInput() {
  fileInput.value?.click();
}

function handleDragOver(e: DragEvent) {
  e.preventDefault();
  isDragOver.value = true;
}

function handleDragLeave(e: DragEvent) {
  e.preventDefault();
  isDragOver.value = false;
}

async function handleDrop(e: DragEvent) {
  e.preventDefault();
  isDragOver.value = false;
  
  const files = Array.from(e.dataTransfer?.files || []);
  await processFiles(files);
}

async function handleFileSelect(e: Event) {
  const target = e.target as HTMLInputElement;
  const files = Array.from(target.files || []);
  await processFiles(files);
  
  // 清空 input 的 value，允许重复选择相同文件
  target.value = '';
}

async function processFiles(files: File[]) {
  if (files.length === 0) return;
  
  isUploading.value = true;
  error.value = '';
  
  try {
    const harFiles: HarFile[] = [];
    
    for (const file of files) {
      if (!file.name.endsWith('.har')) {
        throw new Error(`文件 ${file.name} 不是有效的 HAR 文件`);
      }
      
      const content = await readFileAsText(file);
      const harData = JSON.parse(content);
      
      if (!validateHarFile(harData)) {
        throw new Error(`文件 ${file.name} 格式无效`);
      }
      
      const parsedData = parseHar(harData);
      
      const harFile: HarFile = {
        id: generateId(),
        name: file.name,
        uploadTime: new Date(),
        size: file.size,
        data: harData,
        parsedData
      };
      
      harFiles.push(harFile);
    }
    
    // 通过 emit 更新父组件的文件列表
    const updatedFiles = [...uploadedFiles.value, ...harFiles];
    emit('update:modelValue', updatedFiles);
    
    // 自动选择第一个文件
    if (harFiles.length > 0) {
      selectFile(harFiles[0]!.id);
    }
    
    console.log('Successfully processed files:', harFiles.length, 'Total files:', updatedFiles.length);
    
  } catch (err) {
    error.value = err instanceof Error ? err.message : '文件处理失败';
  } finally {
    isUploading.value = false;
  }
}

function readFileAsText(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target?.result as string);
    reader.onerror = () => reject(new Error('文件读取失败'));
    reader.readAsText(file);
  });
}

function selectFile(fileId: string) {
  const file = uploadedFiles.value.find(f => f.id === fileId);
  if (file) {
    emit('file-selected', file);
  }
}

function confirmDelete(fileId: string) {
  fileToDelete.value = fileId;
  isBatchDelete.value = false;
  showDeleteConfirm.value = true;
}

function confirmBatchDelete() {
  if (selectedFiles.value.length === 0) return;
  isBatchDelete.value = true;
  showDeleteConfirm.value = true;
}

function removeFile() {
  if (isBatchDelete.value) {
    // 批量删除
    const updatedFiles = uploadedFiles.value.filter(f => !selectedFiles.value.includes(f.id));
    emit('update:modelValue', updatedFiles);
    
    // 发送多个删除事件
    selectedFiles.value.forEach(fileId => {
      emit('file-removed', fileId);
    });
    
    // 重置状态
    selectedFiles.value = [];
  } else {
    // 单个删除
    if (!fileToDelete.value) return;
    
    const updatedFiles = uploadedFiles.value.filter(f => f.id !== fileToDelete.value);
    emit('update:modelValue', updatedFiles);
    emit('file-removed', fileToDelete.value);
  }
  
  // 重置状态
  showDeleteConfirm.value = false;
  fileToDelete.value = '';
  isBatchDelete.value = false;
}

function cancelDelete() {
  showDeleteConfirm.value = false;
  fileToDelete.value = '';
  isBatchDelete.value = false;
}

function toggleBatchSelect(fileId: string) {
  const index = selectedFiles.value.indexOf(fileId);
  if (index > -1) {
    selectedFiles.value.splice(index, 1);
  } else {
    selectedFiles.value.push(fileId);
  }
}

function toggleSelectAll() {
  if (isAllSelected.value) {
    selectedFiles.value = [];
  } else {
    selectedFiles.value = uploadedFiles.value.map(f => f.id);
  }
}

function getFileName(fileId: string): string {
  const file = uploadedFiles.value.find(f => f.id === fileId);
  return file?.name || '未知文件';
}

function generateId(): string {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function formatTime(date: Date): string {
  return date.toLocaleString('zh-CN');
}
</script>

<style scoped>
.har-uploader {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}

.upload-area {
  border: 3px dashed var(--border);
  border-radius: var(--radius-2xl);
  padding: 80px 60px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(255, 255, 255, 0.8) 100%);
  position: relative;
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.upload-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary-50), var(--accent-50));
  opacity: 0;
  transition: all var(--transition);
}

.upload-area::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.upload-area:hover {
  border-color: var(--primary-color);
  transform: translateY(-6px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.upload-area:hover::before {
  opacity: 0.4;
}

.upload-area.drag-over {
  border-color: var(--success-color);
  background: linear-gradient(135deg, var(--success-50), var(--success-100));
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.2), 0 10px 10px -5px rgba(16, 185, 129, 0.1);
}

.upload-area.drag-over::before {
  opacity: 0.6;
  background: linear-gradient(135deg, var(--success-100), var(--success-200));
}

.upload-area.uploading {
  border-color: var(--success-color);
  background: linear-gradient(135deg, var(--success-50), var(--success-100));
  cursor: not-allowed;
  transform: none;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.upload-icon {
  font-size: 64px;
  opacity: 0.8;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.upload-content h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--text-primary), var(--primary-600));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.upload-content p {
  margin: 12px 0;
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}

.file-info {
  font-size: 16px !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, var(--surface) 0%, rgba(255, 255, 255, 0.9) 100%);
  padding: 16px 24px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(10px);
}

.uploading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.uploading-content p {
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
}

.uploaded-files {
  margin-top: 32px;
  animation: slideInUp 0.3s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.files-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.files-header h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.files-header h4::before {
  content: '📁';
  font-size: 18px;
}

.batch-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.select-all-btn,
.batch-delete-btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}

.select-all-btn:hover {
  background: var(--surface-hover);
  border-color: var(--primary-color);
}

.select-all-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.batch-delete-btn {
  background: var(--error-color);
  color: white;
  border-color: var(--error-color);
}

.batch-delete-btn:hover:not(:disabled) {
  background: #dc2626;
  border-color: #dc2626;
  transform: translateY(-1px);
}

.batch-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.file-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-light);
  opacity: 0;
  transition: var(--transition);
}

.file-item:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.file-item:hover::before {
  opacity: 0.1;
}

.file-item.selected {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, #e0e7ff, #f0f9ff);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
}

.file-item.selected::before {
  opacity: 0.3;
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
}

.file-item.selected .file-name {
  color: var(--primary-color);
  font-weight: 800;
}

.file-item.selected .file-details span {
  background: rgba(99, 102, 241, 0.1);
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 700;
}

.file-info {
  flex: 1;
  position: relative;
  z-index: 1;
}

.file-name {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.file-name::before {
  content: '📄';
  font-size: 14px;
}

.file-details {
  display: flex;
  gap: 16px;
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

.file-details span {
  background: var(--surface);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
}

.file-actions {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.batch-select-btn {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.batch-select-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-light);
  opacity: 0;
  transition: var(--transition);
}

.batch-select-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.batch-select-btn:hover::before {
  opacity: 0.3;
}

.batch-select-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.batch-select-btn.active::before {
  opacity: 0;
}

.check-icon {
  position: relative;
  z-index: 1;
  font-weight: bold;
}

.file-item.batch-selected {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, #e0e7ff, #f0f9ff);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.file-item.batch-selected::before {
  opacity: 0.2;
  background: linear-gradient(135deg, var(--primary-color), #8b5cf6);
}

.remove-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--error-color);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.remove-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: var(--transition);
}

.remove-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}

.remove-btn:hover::before {
  opacity: 1;
}

.delete-icon {
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.error-message {
  margin-top: 20px;
  padding: 20px 24px;
  background: #fef2f2;
  color: #dc2626;
  border: 2px solid #fecaca;
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: shake 0.5s ease-in-out;
  box-shadow: var(--shadow-md);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.error-message::before {
  content: '⚠️';
  font-size: 16px;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .har-uploader {
    padding: 16px;
  }
  
  .upload-area {
    padding: 40px 20px;
  }
  
  .upload-icon {
    font-size: 48px;
  }
  
  .upload-content h3 {
    font-size: 20px;
  }
  
  .upload-content p {
    font-size: 14px;
  }
  
  .file-item {
    padding: 16px;
  }
  
  .file-name {
    font-size: 14px;
  }
  
  .file-details {
    flex-direction: column;
    gap: 4px;
  }
}

/* 成功状态动画 */
.file-item.success {
  border-color: var(--success-color);
  background: #f0fdf4;
}

.file-item.success::before {
  background: #dcfce7;
  opacity: 0.3;
}

/* 加载状态 */
.file-item.loading {
  opacity: 0.7;
  pointer-events: none;
}

.file-item.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--border);
  border-top: 2px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 删除确认对话框 */
.delete-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.delete-confirm-dialog {
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 480px;
  width: 90%;
  animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
}

.delete-confirm-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.confirm-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 32px 32px 24px 32px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 50%, #fecaca 100%);
  border-bottom: 1px solid rgba(252, 165, 165, 0.3);
  position: relative;
}

.confirm-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.2), transparent);
}

.confirm-icon {
  font-size: 32px;
  animation: pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

.confirm-header h3 {
  margin: 0;
  color: #dc2626;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.confirm-content {
  padding: 32px;
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
}

.confirm-content p {
  margin: 0 0 16px 0;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
}

.confirm-content p strong {
  color: #dc2626;
  font-weight: 700;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #fecaca;
}

.confirm-warning {
  color: #6b7280 !important;
  font-size: 15px !important;
  font-style: italic;
  background: #f9fafb;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #e5e7eb;
  margin-top: 16px !important;
}

.files-to-delete {
  max-height: 240px;
  overflow-y: auto;
  margin: 20px 0;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.file-to-delete-item {
  padding: 12px 16px;
  margin: 8px 0;
  background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  font-size: 15px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.file-to-delete-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.02));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.file-to-delete-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #fecaca;
}

.file-to-delete-item:hover::before {
  opacity: 1;
}

.file-to-delete-item:first-child {
  margin-top: 0;
}

.file-to-delete-item:last-child {
  margin-bottom: 0;
}

.confirm-actions {
  display: flex;
  gap: 16px;
  padding: 24px 32px 32px 32px;
  justify-content: flex-end;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.cancel-btn,
.confirm-delete-btn {
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 100px;
  position: relative;
  overflow: hidden;
}

.cancel-btn {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  color: #475569;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cancel-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cancel-btn:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #94a3b8;
}

.cancel-btn:hover::before {
  opacity: 1;
}

.confirm-delete-btn {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
  border: 1px solid #b91c1c;
}

.confirm-delete-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.confirm-delete-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
  border-color: #991b1b;
}

.confirm-delete-btn:hover::before {
  opacity: 1;
}

.confirm-delete-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
</style>
